
import React, { PureComponent } from 'react'
import { connect } from "react-redux";
import { Row, Col, Button, InputNumber } from 'antd';
import _ from 'lodash'
import notify from "@utils/tip";
import PageBackHeader from "@common/PageBackHeader";
import CustomizeTableProvide, { CustomizeTable, CustomizeTablePagination } from "@common/presentational/CustomizeTable";
import { withRouter } from 'react-router-dom';
import { creatScheduleReview } from "@sagas/warehouse/schedule";
import { WAREHOUSE_SCHEDULE_STATUS } from "@constants/WarehouseOrderStatus";
import {getHistoryMatchParams} from "@utils/setUrlQuery";
import {priceFenToYuan, priceYuanToFen} from "@utils/priceConversion";

@connect(({ warehouseManagement }) => ({
    selectedWarehouse: warehouseManagement.selectedWarehouse,
}), {
    creatScheduleReview,
})
@withRouter
class ScheduleAgree extends PureComponent {

    constructor(props) {
        super(props);
        const { location } = props
        const { state } = location
        this.state = {
            order_number: state.order_number,
            detail: state,
            productList: state.data
        }
        this.cancelFunc = this.cancelFunc.bind(this)
    }

    submitForm() {
        const { productList, order_number } = this.state
        const { selectedWarehouse, creatScheduleReview } = this.props
        const createParams = {
            id: selectedWarehouse,
            status: 1,
            orderNumber:order_number
        }
        createParams.details = productList.map(o => {
            return {
                storage_key: o.storage_key,
                storage_type: 2,
                quantity: o.quantity,
                price: o.price,
            }
        })
        if (productList.some(item => typeof (item.quantity) === 'undefined' || item.quantity === '')) {
            notify('请填写数量', 'error')
            return
        }
        if (productList.some(item => typeof (item.price) === 'undefined' || item.price === '')) {
            notify('请填写单价', 'error')
            return
        }
        creatScheduleReview(createParams, () => {
            notify('提交成功', 'success')
            this.cancelFunc()
        })

    }

    cancelFunc() {
        this.props.goBack ? this.props.goBack() : this.props.history.goBack()
    }

    changeField(record, field, value) {
        const { productList } = this.state
        const product = _.cloneDeep(productList)
        const newList = product.map(item => {
            if (item.storage_key === record.storage_key) {
                return {
                    ...item,
                    [field]: field ==='price' ? priceYuanToFen(value) : value
                }
            }
            return item
        })
        this.setState({
            productList: newList
        })
    }

    render() {
        const { detail, productList } = this.state
        let total = 0
        // detail.data.map(item => {
        //     total = total + (item.input_quantity || 0)
        // })
        const columns = [{
            title: '商品',
            dataIndex: 'name',
        }, {
            title: '分类',
            dataIndex: 'type_name',
        }, {
            title: '申请数量',
            dataIndex: 'apply_quantity',
        }, {
            title: '库存量',
            dataIndex: 'storage_quantity',
        }, {
            title: '调出数量',
            dataIndex: 'quantity',
            render: (text, record) =>
            <span>
                <InputNumber onChange={this.changeField.bind(this, record, 'quantity')}
                     min={0}
                     max={99999}
                     step={1}
                     value={record.quantity}
                />
            </span>
        },{
            title: '调拨单价',
            dataIndex: 'price',
            render: (text, record) =>
            <span>
                <InputNumber onChange={this.changeField.bind(this, record, 'price')}
                     min={0}
                     max={99999}
                     step={1}
                     value={priceFenToYuan(record.price)}
                />
            </span>
        }];
        return (
            <div className="bilin-web">
                <PageBackHeader title='调拨详情' />
                <div className="bilin-web-body">
                    <div className="warehouse-check-inventory-page">
                        <div className='inventory-detail'>
                            <div className='ft-20 ft-clr-d ft-w600 mgb-24'>
                                {WAREHOUSE_SCHEDULE_STATUS[detail.status]}
                            </div>
                            <Row className="check-line">
                                <Col span={2}>
                                    <span className='ft-clr-d'>订单编号:</span>
                                </Col>
                                <Col span={6}>
                                    <span className='ft-clr-d'>{detail.order_number}</span>
                                </Col>
                                <Col span={2}>
                                    <span className='ft-clr-d'>调入仓库:</span>
                                </Col>
                                <Col span={6}>
                                    <span className='ft-clr-d'>{detail.in_warehouse_name}</span>
                                </Col>
                                <Col span={2}>
                                    <span className='ft-clr-d'>调出仓库:</span>
                                </Col>
                                <Col span={6}>
                                    <span className='ft-clr-d'>{detail.out_warehouse_name}</span>
                                </Col>
                            </Row>
                            <Row className="check-line">
                                <Col span={2}>
                                    <span className='ft-clr-d'>创建人:</span>
                                </Col>
                                <Col span={6}>
                                    <span className='ft-clr-d'>{detail.applier}</span>
                                </Col>
                                <Col span={2}>
                                    <span className='ft-clr-d'>创建时间:</span>
                                </Col>
                                <Col span={6}>
                                    <span className='ft-clr-d'>{detail.apply_time}</span>
                                </Col>
                                <Col span={2}>
                                    <span className='ft-clr-d'>调出时间:</span>
                                </Col>
                                <Col span={6}>
                                    <span className='ft-clr-d'>{detail.send_time}</span>
                                </Col>
                            </Row>
                        </div>
                        <div className="warehouse-product-list-module">
                            <div className="mgb-16">
                                <span className='mgr-16 ft-16 ft-w600'>商品明细</span>
                                <span>共 <span className='ft-w600 ft-16'>{productList.length}</span> 种商品, 数量: <span className='ft-w600 ft-16'>{total}</span></span>
                            </div>
                            <CustomizeTableProvide ref={this.tableRef} tableKey="stockList" onChange={() => { }}>
                                <div className="table-list">
                                    <CustomizeTable
                                        columns={columns}
                                        dataSource={productList || []}
                                        pagination
                                    />
                                </div>
                            </CustomizeTableProvide>
                        </div>
                    </div>
                </div>
                <div className="bilin-web-footer">
                    <Button type="primary" onClick={this.submitForm.bind(this)}>同意</Button>
                    <Button type="primary" ghost onClick={this.cancelFunc}>取消</Button>
                </div>
            </div>

        )
    }
}

export default ScheduleAgree